<template>
	<div class="demo-image ">
		<img src="@/assets/pngImg/kong.png" alt="" class="iconkong" v-if="photosort.length == 0">
		<div class="mephotoTop" ref="top">
			<el-button size="small" @click="open" class="createAblum"> <i class="iconfont iconadd-fill"></i>创建相册</el-button>
			<transition name="el-zoom-in-top">
				<ul class="controlAlbum" v-show="firstChose">
					<li @click="deleteMessage"><i class="iconfont iconhuishouzhan"></i><span>删除相册</span></li>
					<li @click="rename"><i class="iconfont iconzhongmingming"></i><span>重命名</span></li>
					<li @click="share"><i class="iconfont iconfenxiang"></i><span>分享相册</span></li>
					<li @click="download"><i class="iconfont icon-xiazai"></i><span>下载</span></li>
				</ul>

			</transition>

		</div>
		
		<div class="center">
			<div class="center clearfix" v-if="!ishow">
				<div class="album" v-if="photosort" v-for="(item,index) in photosort" :key="item.ablumId">
					<div class="img" @click='intoNext(item)'>
						<el-image style="width: 200px; height: 180px" :src="$store.state.baseHttp+item.ablumCoverPath" fit="cover">
							<div slot="error" class="image-slot">
								<i class="iconkong iconfont"></i>
							</div>
						</el-image>
					</div>
					<i class="iconfont iconbianji" @click.stop="edit(item,index)" :class="{showIcon:inne == index}"></i>
					<h4>{{item.ablumName}}</h4>
					<div class="description">
						<label for="">描述: </label>
						<el-tooltip class="item" effect="light" :content="item.ablumDescription" placement="bottom-end">
							<el-input v-model="item.ablumDescription" placeholder="····" @blur='blur(item)' label='描述: ' maxlength=12
							 autofocus="false"></el-input>
						</el-tooltip>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import bus from '@/bus/bus.js'
	export default {
		data() {
			return {
				inne: null,
				ishow: false, //是否进入相册
				firstChose: false, //是否展示编辑栏
				photosort: [], //存放的相册
				actionAblum: null, //选中的相册的id
				AblumName: '',
				imgArr: [],
				descirption: ''
			}
		},
		created() {
			this.getAlbum()
			bus.$on("successNum",this.getAlbum)
		},
		activated() {
			this.getAlbum()
		},
		methods: {
			//获取相册
			getAlbum() {
				this.$http.get('/api/ablum').then(res => {
					let ablumArr = this.$ablumClass.DgetAllAblum(res.data)
					if (res.status == 200) {
						this.photosort = ablumArr
					}
				})
			},
			//更改描述
			blur(ablum) {
				let Cdata = this.$ablumClass.CreviseAblum(ablum.ablumId, ablum.ablumName, ablum.ablumDescription)
				console.log(Cdata)
				this.$http.put('/api/ablum', Cdata).then((res) => {
					console.log(res)
				})
				// let input = document.querySelector('.el-input__inner')
				// input.style.outline = 'none'
			},
			//创建相册 
			open() {
				this.$prompt('请输入相册名', '创建相册', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputValidator: (value) => { //处理重名相册问题
						let bool = true;
						this.photosort.map((item) => {
							if (item.name == value) {
								bool = false
								return false
							}
						})
						return bool
					},
					inputErrorMessage: '已存在重名相册！'
				}).then(({
					value
				}) => {
					if (this.creatAlbum(value)) {
						this.$message({
							type: 'success',
							message: '相册创建成功: ' + value
						});
					} else {
						this.$message.error('创建失败，网络错误！')
					}

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			// 创建相册
			creatAlbum(value) {
				let album = {};
				let albumName = value.toString() //将输入结果转化为字符串
				let Cdata = this.$ablumClass.CcreateAblum(albumName)
				this.$http.post('/api/ablum', Cdata).then(res => {
					if (res.status == 201) {
						// this.photosort.push(album)
						this.getAlbum(); //重新渲染
						return true
					}
				})
				return true
			},
			//进入相册
			intoNext(ablum) {
				let params = {
					ablumName: ablum.ablumName,
					ablumId: ablum.ablumId,
					ablumArr: this.photosort,
				}
				console.log(params)
				this.$router.push({
					name: 'photoshow',
					params
				})
			},
			//返回上一级
			back() {
				this.ishow = !this.ishow
			},
			//编辑
			edit(ablum, index) {
				if (this.inne == index) {
					this.inne = null;
					this.firstChose = false;
					this.actionAblum = null;
					return
				}
				this.actionAblum = ablum;
				this.inne = index;
				this.firstChose = true;
				let top = this.$refs.top;
				let that = this;
				window.onclick = function(event) { //点击外部关闭
					if (event.target == document.querySelector('.mains')) {
						that.inne = null;
						that.firstChose = false;
					}

				}
			},
			//删除相册
			deleteAlbum() {
				this.$http.delete('/api/ablum?ablumId=' + this.actionAblum.ablumId).then(res => {
					if (res.status == 204) {
						//取消编辑
						this.inne = null;
						this.firstChose = false;

						this.getAlbum() //重新渲染
						this.$message({
							message: this.actionAblum.ablumName + ' 删除成功!',
							type: 'success'
						});
					}
				}).catch(err => {
					this.$message.error('删除失败!')
				})
			},
			//相册重命名
			rename() {
				this.$prompt('请输入新名字', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^.{3,10}$/,
					inputErrorMessage: '请输入3-10位字符'
				}).then(({
					value
				}) => {
					this.renameReauest(value)
					this.$message({
						type: 'success',
						message: '新名字为: ' + value
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			//分享相册
			share() {
				this.$http.get('api/ablum/' + this.actionAblum.ablumId + '/picture').then(res => {
					let arr = [];
					res.data.forEach(img => {
						arr.push(img.pictureId)
					})
					bus.$emit('shareForm', arr, 2)
					//取消编辑
					this.inne = null;
					this.firstChose = false;
				})
				// bus.$emit('shareForm',this.actionAblum.ablumId)

			},
			//下载
			download() {
				console.log(this.$http.defaults.baseURL + 'api/download/ablum/'+this.actionAblum.ablumId)
				this.$http.get('/api/download/ablum/'+this.actionAblum.ablumId,{responseType: "blob"}).then(res => {
					 let blob = new Blob([res.data]);
					 let a = document.createElement("a");
					 let href = window.URL.createObjectURL(blob); //创建下载的链接
					 a.href = href;
					 a.download = this.actionAblum.ablumName+".zip"; //下载后文件名
					 document.body.appendChild(a);
					 a.click(); //点击下载
					 document.body.removeChild(a); //下载完成移除元素
					 window.URL.revokeObjectURL(href); //释放掉blob对象
				})
			},
			deleteMessage() {
				this.$confirm('此操作将删除该相册及相册内照片, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteAlbum()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			renameReauest(value) {
				let Cdata = this.$ablumClass.CreviseAblum(this.actionAblum.ablumId, value, this.actionAblum.ablumDescription)
				console.log(Cdata)
				this.$http.put('/api/ablum', Cdata).then((res) => {
					if (res.status == 204) {
						this.inne = null; //取消编辑
						this.firstChose = false;
						this.getAlbum() //重新渲染
					}
				})
			}
		}

	}
</script>

<style scoped="scoped">
	.iconkong {
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.el-tooltip__popper.is-light {
		border: 1px solid #d5d5d6;
	}

	.box {
		width: 400px;
	}

	.top {
		text-align: center;
	}

	.left {
		float: left;
		width: 60px;
	}

	.right {
		float: right;
		width: 60px;
	}

	.bottom {
		clear: both;
		text-align: center;
	}

	.item {
		margin: 4px;
	}

	.left .el-tooltip__popper,
	.right .el-tooltip__popper {
		padding: 8px 10px;
	}

	.description {
		overflow: hidden;
		cursor: pointer;
		font-family: 'siyuan';
		font-size: 12px;
		text-align: left;
	}

	.description label {
		vertical-align: middle;
	}

	.description .el-input {
		width: 154px;
	}

	.description>>>.el-input__inner {
		border: none;
		height: 15px;
		padding-left: 0;
		vertical-align: middle;
		background-color: transparent;
	}

	.iconkong {
		font-size: 40px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.iconadd-fill {
		margin-right: 10px;
		font-size: 20px;
		vertical-align: middle;
	}

	.demo-image {
		overflow: hidden;
		position: relative;
		width: 100%;
		height:calc(100% - 60px);
		margin-top: 60px;
	}

	.gridGroup {
		width: 180px;
		height: 180px;
		display: grid;
		grid-template-columns: repeat(2, 50%);
		/* 和列分布 */
		grid-template-rows: repeat(2, 50%);
		overflow: hidden;
		border-radius: 100%;
		grid-row-gap: 5px;
		/* 行间距 */
		grid-column-gap: 5px;
		/* 列间距 */
	}

	.grid {
		display: grid;
	}

	.smartClassify>>>.el-image {
		border-radius: 0;
	}

	.mephotoTop {
		position: absolute;
		width: 100%;
		top: 0;
		height: 50px;
		background-color: #f1f6fa;
	}

	.createAblum {
		position: absolute;
		top: 5px;
		right: 20px;
		vertical-align: middle;
		font-size: 16px;
	}


	.center {
		margin-top: 75px;
	}

	.album {
		position: relative;
		width: 200px;
		height: 220px;
		float: left;
		margin-left: 30px;
		margin-bottom: 20px;
		cursor: pointer;
	}

	.album:hover .iconbianji {
		opacity: 1;
		color: #000000;
	}

	.iconbianji {
		cursor: pointer;
		position: absolute;
		bottom: 48px;
		right: 10px;
		font-size: 20px;
		background-color: #989898;
		padding: 6px;
		border-radius: 50%;
		opacity: 0;
		transition: .3s;
	}

	.showIcon {
		opacity: 1;
	}

	.album h4 {
		margin-top: 5px;
		user-select: none;
	}

	.el-image {
		overflow: hidden;
		border-radius: 20px;
		/* box-shadow:3px 3px 10px -4px #9ea7c9; */
		box-shadow: 0 2px 12px 0 rgba(179, 190, 227, .4);
	}

	.el-image>>>img {
		display: block;

	}

	.hiddens::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 200px;
		height: 200px;
		background-color: rgba(0, 0, 0, .2);
		z-index: 1;
	}



	.controlAlbum {
		margin-top: 14px;
	}

	.controlAlbum li {
		float: left;
		font-size: 16px;
		margin-left: 20px;
		cursor: pointer;
	}

	.controlAlbum i {
		margin-right: 3px;
		font-size: 16px;
	}

	.controlAlbum li:hover {
		color: #67c23a;
	}
</style>
